<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>

    <style>
      .triangle {
        position: relative;
        width: 100px;
        height: 100px;
      }

      .triangle::before,
      .triangle::after {
        content: "";
        position: absolute;
        border-width: 0 30px 30px;
        border-style: solid;
        border-color: transparent transparent #ccc;
      }

      .triangle::after {
        bottom: 36px;
        transform: rotate(180deg);
      }

      .triangle.top::before,
      .triangle.bottom::after {
        border-color: transparent transparent #333;
      }
    </style>
  </head>
  <body>
    <div class="triangle"></div>

    <script
      type="application/javascript"
      src="../static/plugins/jquery/jquery.js"
    ></script>
    <script>
      $(".triangle").click(function () {
        if ($(this).hasClass("top")) {
          $(this).removeClass("top").addClass("bottom");
        } else if ($(this).hasClass("bottom")) {
          $(this).removeClass("bottom");
        } else {
          $(this).addClass("top");
        }
      });
    </script>
  </body>
</html>
